<template>
    <h2>可折叠面板</h2>
    <div class="pannel">
        <div class="title">
            <h4>自由与爱情</h4>
            <span @click="isFold = !isFold">{{ isFold ? '展开' : '收起' }}</span>
        </div>
        <div class="container" v-show="!isFold">
            <p>生命诚可贵，</p>
            <p>爱情价更高。</p>
            <p>若为自由故，</p>
            <p>两者皆可抛。</p>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    const isFold = ref(true)

</script>

<style lang="scss">
    //设置整体背景色为灰色
    body {
        background-color: #ddd;
    }
    
    //设置盒子（app）
    #app {
        width: 400px;
        //将 #app 元素在页面中水平居中显示，并设置上下 20px 的外边距。
        //当一个块级元素（如 div）设置了宽度（width），
        //并且左右 margin 设置为 auto，浏览器会自动将该元素在其父容器中 水平居中。
        margin: 20px auto; //TODO
        border-radius: 1em;
        border: 3px solid green;
        //box-shadow: [水平偏移] [垂直偏移] [模糊半径] [颜色];
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);//TODO
        padding: 1em 2em 2em 2em;
        background-color: white;

        h2 {
            text-align: center;
        }
    }

    .pannel {
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 2px solid #ddd;
            padding: 0 1em;
            //TODO
            h4 {
                //默认情况下，浏览器会给标题标签（如 h1 ~ h6）设置默认的上下 margin。
                //这里是消除默认 margin
                margin: 0;
                //设置 行高为字体大小的 2 倍，让文字在容器中垂直居中。
                //即文字和边界会有间隙
                line-height: 2;
            }

            span {
                cursor: pointer;
            }
        }
        .container {
            padding: 0 1em;
            border: 2px solid #ddd;
        }
    }
</style>